<template>
  <transition name="fade">
    <div class="sledit-wrap" v-show="show">
      <div class="sledit-mask"></div>
      <div class="sledit-box">
        <div class="sledit-tit tac">批量编辑选项</div>
        <div class="sledit-bd">
          <div class="sledit-ed">
            <div class="sledit-tit-sub">每行内容对应一个选项</div>
            <textarea v-model="optionValue"></textarea>
          </div>
          <div class="sledit-op">
            <div class="sledit-tit-sub">常用选项（双击添加）</div>
            <select class="common-options" multiple="multiple">
              <option v-for="(option, i) in commonOptions" v-bind:value="option.text" v-on:dblclick="common_selected(option.text)" v-on:click="option_click(option.text)">{{option.text}}</option>
            </select> 
            <textarea readonly class="common-option-value" v-model="commonOptionValue"></textarea>
          </div>
        </div>
        <div class="sledit-ft tar">
          <a class="btn btn-default" href="javascript:;" v-on:click="close">取消</a>
          <a class="btn btn-primary" href="javascript:;" v-on:click="confirm">确定</a>
        </div>
        <a class="iconfont icon-close close" href="javascript:;" v-on:click="close"></a>
      </div>
    </div>
  </transition>
</template>

<script>
export default{
  props:['show','optionValue'],
  
  data:function(){
    return {
      commonOptions:[{
        text:'年龄',
        values:['18','19','20','21','22','23','24','25','26','27','28']
      },{
        text:'就职状态',
        values:['在职','失业']
      },{
        text:'星期',
        values:['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
      },{
        text:'月份',
        values:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
      },{
        text:'时长',
        values:['30分钟','1小时','2小时']
      },{
        text:'重要性',
        values:['重要']
      },{
        text:'学科',
        values:['哲学','经济学','法学','教育学','文学','历史学','理学','工学','农学','医学','军事学','管理学','艺术学']
      },{
        text:'学历',
        values:['小学','初中','高中','专科','本科','硕士研究生','博士研究生']
      }],
      // 常用的选项
      commonOptionValue:'',
      editValue:this.optionValue
    }
  },
  methods:{
    option_click:function(text){
      var values = []
      this.commonOptions.forEach(function(item,index){
        if(item.text == text){
          values = item.values
        }
      })
      var options = ''
      values.forEach(function(val,i){
        if(i>0){
          options +='\n'
        }
        options += val
      })
      this.commonOptionValue = options
    },
    common_selected:function(text){
      if(this.optionValue.length>0){
        this.optionValue +='\n'
      }
      this.optionValue += this.commonOptionValue
    },
    confirm:function(){
      var ops = ''
      var options = []
      if(this.optionValue.length>0){
        ops = this.optionValue.split('\n')
      }
      for(var i=0;i<ops.length;i++){
        options.push({label:ops[i]})
      }
      this.$emit('say-options',options)
      this.$emit('close-editor',false);
    },
    close:function(){
      this.$emit('close-editor',false);
    }
  }
}
</script>

<style>
</style>